<template>
  <!-- 试题录入 -->
  <div class="user_box">
    <div class="user_head">试题录入</div>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="100px"
      class="demo-form"
    >
      <el-form-item label="学科" prop="subjectID">
        <el-select
          v-model="form.subjectID"
          filterable
          placeholder="请选择"
          class="inputW"
        >
          <el-option
            v-for="item in form.listOne"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目录" prop="catalogID">
        <el-select v-model="form.catalogID" placeholder="请选择" class="inputW">
          <el-option
            v-for="item in form.listTwo"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业" prop="enterpriseID">
        <el-select
          v-model="form.enterpriseID"
          placeholder="请选择"
          class="inputW"
        >
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市" prop="province">
        <el-select v-model="form.province" placeholder="请选择" class="inputA">
          <el-option
            v-for="item in form.listThree"
            :key="item.province"
            :label="item.province"
            :value="item.province"
          >
          </el-option>
        </el-select>
        <el-select v-model="form.city" placeholder="请选择" class="inputA">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向" prop="direction">
        <el-select v-model="form.direction" placeholder="请选择" class="inputW">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题型" prop="questionType">
        <el-radio-group v-model="form.questionType" class="inputW">
          <el-radio :label="1">单选</el-radio>
          <el-radio :label="2">多选</el-radio>
          <el-radio :label="3">简答题</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="难度" prop="difficulty">
        <el-radio-group v-model="form.difficulty" class="inputW">
          <el-radio :label="1">简单</el-radio>
          <el-radio :label="2">一般</el-radio>
          <el-radio :label="3">困难</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="题干" prop="question">
        <quill-editor v-model="form.question"></quill-editor>
      </el-form-item>

      <el-form-item label="选项" prop="options" class="option">
        <el-form-item prop="content">
          <el-radio :label="1" class="el-radioB">A：</el-radio>
          <el-input v-model="form.video" class="inputB"></el-input>
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item prop="content">
          <el-radio :label="2" class="el-radioB">B：</el-radio>
          <el-input v-model="form.video" class="inputB"></el-input>
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item prop="content">
          <el-radio :label="3" class="el-radioB">C：</el-radio>
          <el-input v-model="form.video" class="inputB"></el-input>
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item prop="content">
          <el-radio :label="4" class="el-radioB">D：</el-radio>
          <el-input v-model="form.video" class="inputB"></el-input>
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" disabled>+增加选项与答案</el-button>
        </el-form-item>
      </el-form-item>

      <el-form-item label="解析视频：" prop="videoURL">
        <el-input v-model="form.videoURL" class="inputW"></el-input>
      </el-form-item>
      <el-form-item label="答案解析：" prop="answer">
        <quill-editor v-model="form.answer"></quill-editor>
      </el-form-item>

      <el-form-item label="题目备注" prop="remarks">
        <el-input type="textarea" v-model="form.remarks"></el-input>
      </el-form-item>

      <el-form-item label="试题标签" prop="tags">
        <el-select v-model="form.tags" placeholder="请选择" class="inputW">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">确认提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 富文本框
import { detail, add, update } from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simpleAdd } from '@/api/hmmm/directorys.js'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { provinces, citys } from '@/api/hmmm/citys.js'

export default {
  components: {
    quillEditor
  },
  data () {
    return {
      // 上传图片
      dialogImageUrl: '',
      dialogVisible: false,
      form: {
        subjectID: null, // 学科id
        subjectName: null, // 学科
        directoryName: null, // 目录
        company: null, // 企业
        province: null, // 城市
        city: null, // 地区
        direction: null, // 方向
        questionType: '', // 题型
        difficulty: '', // 难度
        question: '', // 题干
        options: [], // 选项
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '', // 标签
        listOne: [],
        listTwo: [],
        listThree: []
      },
      radio1: 1,
      radio2: 1,
      rules: {
        subjectID: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 0, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        catalogID: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        enterpriseID: [
          {
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }
        ],
        province: [
          {
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }
        ],
        direction: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个活动性质',
            trigger: 'change'
          }
        ],
        questionType: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ],
        question: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ],
        answer: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
      }
    }
  },

  created () {
    console.log(this.$route.params.id)

    this.getDetail()
  },

  methods: {
    async vsubmitForm () {
      try {
        // 校验表单
        this.$refs.form.validate()

        if (this.$route.params.id) {
          await update(this.form)

          this.$message.success('修改成功')
        } else {
          await add(this.form)

          this.$message.success('添加成功')
        }

        this.$router.push('/employee')
      } catch (error) {
        console.log(error)
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },

    // 上传图片
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 获取题库基本详情
    async getDetail () {
      if (this.$route.params.id) {
        const data = await detail(this.$route.params.id)

        console.log(data)
        this.form = { ...data }
      } else {
        // 获取学科
        const { data } = await simple()
        // 目录
        const res = await simpleAdd()
        // console.log(res)

        const city = await provinces()
        this.form.listThree = [...city]
        this.form.citys = await citys(this.form.provinces)
        console.log(city)
        console.log(this.form.citys)

        this.form.listOne = [...data]
        this.form.listTwo = [...res.data]
        // console.log(this.form.listOne)
      }
    }
  }
}
</script>

<style scoped lang="less">
.user_box {
  // width: 1178px;
  // height: 417.5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  transition: 0.3s;
  border-radius: 4px;
  overflow: hidden;
  margin: 20px;
  padding: 20px;
  .demo-form {
    ::v-deep .option {
      .el-form-item {
        display: flex;
        justify-content: flex-start;
      }
    }
  }
  .el-radioB {
    margin-right: 0;
  }
  .inputB {
    width: 240px;
  }
  .inputW {
    width: 400px;
  }
  .inputA {
    width: 200px;
  }
}

.footpage {
  float: right;
}
.addBtn {
  float: right;
  margin-left: 10px;
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
  border: 1px solid #dcdfe6;
  font-weight: 500;
}
.m_alert {
  display: flex;
  background-color: #f4f4f5;
  color: #909399;
  width: 100%;
  padding: 8px 16px;
  margin: 0;
  border-radius: 4px;
  color: #909399;
  i {
    display: inline-block;
    font-size: 16px;
    width: 16px;
    line-height: 1;
    margin-right: 5px;
  }
  .m-text {
    font-size: 13px;
    line-height: 18px;
  }
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}

.edit1 {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  &:hover {
    background-color: #409eff;
    color: #fff;
  }
}
.edit2 {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
  &:hover {
    background-color: #f56c6c;
    color: #fff;
  }
}
</style>
